iT邦幫忙

2025 iThome 鐵人賽

DAY 21
0
Modern Web

不只是登入畫面!一起打造現代化登入系統系列 第 21

安全再進化[1 / 5 ]:Firebase Email 驗證信

  • 分享至 

  • xImage
  •  

就算我們已經有 Token 驗證、Cookie、Redux 權限管理,但「用戶的 Email 真的屬於他本人嗎?」這件事還沒確認。

為了避免 假帳號 / 垃圾註冊 / 偷別人信箱建立帳號,你可以開啟 Firebase Email Verification(電子郵件驗證)。


為什麼要做 Email 驗證?

  • 防止別人亂填 Email 註冊
  • 防止垃圾帳號灌爆系統
  • 防止拿別人 Email 假裝註冊
  • 可限制「未驗證帳號不能登入 / 不能進特定頁面」

實作流程總覽:

  1. 使用者註冊 → Firebase 自動建立帳號
  2. 立刻寄出驗證信
  3. 用戶點擊信件內連結 → Firebase 自動標記 emailVerified = true
  4. 前端登入時判斷:「未驗證 → 不給進系統 / 提示請驗證」

註冊後寄送驗證信

import { getAuth, createUserWithEmailAndPassword, sendEmailVerification } from "firebase/auth";

export const signupWithEmail = async (email, password) => {
  const auth = getAuth();
  const result = await createUserWithEmailAndPassword(auth, email, password);

  // 寄送驗證信
  await sendEmailVerification(result.user);

  return {
    message: "註冊成功,驗證信已寄出!請到信箱點擊連結完成驗證。",
    user: result.user,
  };
};

登入時檢查「有沒有驗證過 Email」

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

export const loginWithEmailCheck = async (email, password) => {
  const auth = getAuth();
  const result = await signInWithEmailAndPassword(auth, email, password);

  if (!result.user.emailVerified) {
    throw new Error("尚未驗證 Email,請先到信箱點擊驗證連結!");
  }

  return result.user;
};

Redux / ProtectedRoute 也可以加「未驗證阻擋」

if (!user.emailVerified) {
  return <p>請先驗證信箱才能使用本功能。</p>;
}

延伸:自訂驗證頁 + 重新寄送驗證信
你可以做一個 /verify-email 頁面,提供「重新寄送」按鈕:

import { getAuth, sendEmailVerification } from "firebase/auth";

export const resendVerificationEmail = async () => {
  const auth = getAuth();
  if (!auth.currentUser) throw new Error("尚未登入");

  await sendEmailVerification(auth.currentUser);
  return "驗證信已重新寄出!";
};

上一篇
屋內安全[ 9 / 9 ]:權限配置與 Redux 管理登入狀態|角色控制 / 動態功能鎖定
下一篇
安全再進化[1 / 5 ]:客製化 Firebase 驗證信內容
系列文
不只是登入畫面!一起打造現代化登入系統23
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言